* {
    margin: 0;
    padding:0;
}
#outerContainer{
    position: absolute;
    top: 25%;
    left: 20%;
    width: 200px;
    height: 200px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transform-origin: 50% 50%;  /*50% 50%是相对于width和height的，如果不设置width和height则transform-origin不起作用*/
    backface-visibility: hidden;
    -webkit-animation: animations 4s ease-in-out 0.1s infinite;
    -moz-animation: animations 4s ease-in-out 0.1s infinite;
    -o-animation: animations 4s ease-in-out 0.1s infinite;
    animation: animations 4s ease-in-out 0.1s infinite;
}
@-webkit-keyframes animations {
    0%{-webkit-transform:rotateZ(270deg); }
    25%{-webkit-transform:rotateY(180deg); }
    50%{-webkit-transform:rotateZ(-270deg);}
    75%{-webkit-transform:rotateY(-180deg);}
}
@-moz-keyframes animations {
    0%{-moz-transform:rotateZ(270deg); }
    25%{-moz-transform:rotateY(180deg); }
    50%{-moz-transform:rotateZ(-270deg);}
    75%{-moz-transform:rotateY(-180deg);}
}
@-o-keyframes animations {
    0%{-o-transform:rotateZ(270deg); }
    25%{-o-transform:rotateY(180deg); }
    50%{-o-transform:rotateZ(-270deg);}
    75%{-o-transform:rotateY(-180deg);}
}
@keyframes animations {
    0%{transform:rotateZ(270deg); }
    25%{transform:rotateY(180deg); }
    50%{transform:rotateZ(-270deg);}
    75%{transform:rotateY(-180deg);}
}
#container {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}
#container>div {
    position: absolute;
    top: 0;
    width: 198px;
    height: 198px;
    border: 1px solid darkgray; /*边缘的边框总宽度为2px*/
}
.one{
    background-color: blue;
    -webkit-transform: translateZ(100px);
    transform: translateZ(100px);
}
.two{
    background-color: white;
    -webkit-transform: rotateX(90deg) translateZ(100px);
    transform: rotateX(90deg) translateZ(100px);
}
.three{
    background-color: yellow;
    -webkit-transform: rotateX(90deg) translateZ(-100px);
    transform: rotateX(90deg) translateZ(-100px);
}
.four{
    background-color: orange;
    -webkit-transform: rotateY(90deg) translateZ(-100px);
    -moz-transform: rotateY(90deg) translateZ(-100px);
    -ms-transform: rotateY(90deg) translateZ(-100px);
    -o-transform: rotateY(90deg) translateZ(-100px);
    transform: rotateY(90deg) translateZ(-100px);
}
.five{
    background-color: red;
    -webkit-transform: rotateY(90deg) translateZ(100px);
    transform: rotateY(90deg) translateZ(100px);
}
.six{
    background-color: green;
    -webkit-transform: translateZ(-100px);
    transform: translateZ(-100px);
}
.min_cube{
    width: 64px;
    height: 64px;
    float: left;
    border: 1px solid darkgray; /*中间的边框总宽度为2px*/
}